<template>
	<view class="role-home">
		<view class="img-bg">
			<image v-if="studentInfo.sex" :src="`/static/${studentInfo.sex==1?'role1':'role'}.png`" mode="aspectFill"></image>
		</view>
		<view class="content">
			<view class="point-num">
				<view class="image">
					<image src="/static/stu/jinbi.png" mode="aspectFit"></image>
				</view>
				<text class="num">积分：{{studentInfo.zScore}}</text>
			</view>
			<view class="icons">
				<view class="ranking" @click="listRanking">
					<image src="/static/stu/rank.png" mode="aspectFit"></image>
					<text>榜单</text>
				</view>
				<view class="ranking xiaoxi" @click="msgList()">
					<image src="/static/stu/xiaoxi2.png" mode="aspectFit"></image>
					<text>消息</text>
				</view>
			</view>
			<view class="example-box">
				<view v-if="!exampleInfo.id" class="no-exa">
					<view class="">
						还未选择重要他人
					</view>
					<text class="btn" @click="selectExample()">去选择</text>
				</view>
				<view v-else>
					<view class="example" @click="exampleDetails()">
						<image :src="api.xiaodeObsUrl+exampleInfo.pictureUrl" mode="aspectFill"></image>
						<view class="cont">
							<text class="name">{{exampleInfo.name}}</text>
							<text v-if="exampleInfo.label&&exampleInfo.label!='undefined'">标签：{{exampleInfo.label}}</text>
							<text v-if="exampleInfo.keyWord&&exampleInfo.keyWord!='undefined'">关键字：{{exampleInfo.keyWord}}</text>
						</view>
				
					</view>
				</view>
			</view>
		</view>
		<view class="tips-sign" v-if="sign_tips">
			记得前往每日任务完成签到
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data(){
			return {
				exampleInfo: [],
				studentInfo: getApp().globalData.userInfo || {},
				sign_tips: false
			}
		},
		onLoad(){
			this.utils.setSTabBar()
		},
		onShow(){
			this.getExample();
			this.getMeInfo();
		},
		methods: {
			getTask(){
				let date = new Date();
				let Mon = date.getMonth()+1;
				Mon = Mon>9?Mon:`0${Mon}`;
				let day = date.getDate();
				day = day>9?day:`0${day}`
				let pickerDate = date.getFullYear()+'-'+Mon+'-'+day;
				this.api.get('sTask/queryTask', {
					cycle: 1,
					date: pickerDate,
					types: JSON.stringify([1])

				}).then(res=>{
					let list = res.data.Task;
					if(list[0] && list[0].state==1){
						this.sign_tips = true;
						setTimeout(()=>{
							this.sign_tips = false;
						}, 3000)
					}
				})
			},
			getMeInfo(){
				this.api.get('user/getMeInfo').then(res=>{
					if(res.data.state == 'ok'){
						this.studentInfo = res.data.user;
						this.getTask();
					}
				})
			},
			getExample(){
				this.api.get('sExample/findBindExample').then(res=>{
					if(res.data.state == 'ok'){
						this.exampleInfo = res.data.example || {};
					}
				})
			},
			selectExample(){
				
				uni.navigateTo({
					url: '/pages/student/select-example'
				})
			},
			exampleDetails(){
				uni.navigateTo({
					url: '/pages/student/example-details'
				})
			},
			listRanking(){
				uni.navigateTo({
					url: '/pages/student/list-ranking'
				})
			},
			msgList(){
				uni.switchTab({
					url: '/pages/chatSystem/msg-list'
				})
			}
		},
	}
</script>

<style lang="less">
	.role-home{
		// #ifndef H5
		height: 100vh;
		// #endif
		// #ifdef H5
		height: calc(100vh - 50px);
		min-height: 1200rpx;
		// #endif
		overflow: hidden;
		position: relative;
		
		background-image: url('~@/static/role-bg.jpg');
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-color: #06ea59;
		.img-bg{
			position: absolute;
			top: 576rpx;
			left: 258rpx;
			image{
				width: 190rpx;
				height: 536rpx;
			}
		}
		.content{
			position: absolute;
			width: 100%;
			top: 0;
			
		}
		.icons{
			position: fixed;
			width: 80rpx;
			border-radius: 40rpx;
			padding: 20rpx 0;
			
			/* #ifdef H5 */
			right: calc(var(--window-right) + 40rpx);
			bottom: calc(220rpx + 50px);
			/* #endif */
			/* #ifndef H5 */
			right: 40rpx;
			bottom: 220rpx;
			/* #endif */
			background-color: rgba(85, 172, 238, .4);
			.ranking{
				text-align: center;
				font-size: 0;
				image{
					width: 62rpx;
					height: 62rpx;
				}
				text{
					margin-top: 10rpx;
					font-size: 24rpx;
					display: block;
					color: #fff;
				}
			}
			.xiaoxi{
				margin-top: 12rpx;
			}
		}
		
		.point-num{
			position: absolute;
			top: 80rpx;
			left: 40rpx;
			height: 64rpx;
			padding: 0 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #55acee;
			border-radius: 32rpx;
			color: #fff;
			font-size: 24rpx;
			.image{
				font-size: 0;
			}
			image{
				width: 48rpx;
				height: 48rpx;
			}
			.num{
				margin-left: 24rpx;
			}
		}
		.example-box{
			position: absolute;
			top: 320rpx;
			left: 0rpx;
			background-color: rgba(85, 172, 238, .6);
			border-radius: 80rpx;
			color: #FFFFFF;
			.no-exa{
				padding: 30rpx;
				width: 260rpx;
				text-align: center;
				.btn{
					margin-top: 24rpx;
					display: inline-block;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 16rpx;
					background-color: #FFFFFF;
					color: #55ACEE;
					border-radius: 8rpx;
					
				}
			}
		}
		.example{
			padding: 30rpx;
			width: 260rpx;
			box-sizing: border-box;
			image{
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 10rpx;
				border-radius: 60rpx;
			}
			.cont{
				text-align: center;
				font-size: 24rpx;
				text{
					display: block;
					margin-bottom: 20rpx;
				}
				.name{
					font-size: 32rpx;
					font-weight: bold;
					letter-spacing: .1em;
				}
			}
		}
		.tips-sign{
			position: fixed;
			width: 600rpx;
			top: 20rpx;
			// #ifdef APP-PLUS
			top: 80rpx;
			// #endif
			left: 50%;
			transform: translateX(-50%);
			background-color: #FFFFFF;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			border-radius: 24rpx;
			box-shadow: 1rpx 4rpx 40rpx rgba(0,0,0,.3);
		}
	}
</style>
